<template>
    <div class="tickets">
        <Loading v-if="remoteDataBusy"></Loading>
        <div class="empty" v-else-if="tickets.length === 0">
            You don't have any ticket yet.
        </div>
        <section v-else class="tickets-list">
            <div class="ticket-item" v-for="ticket of tickets" :key=ticket._id>
                <router-link :to="{name:'ticket', params:{id:ticket._id}}" tag="a">{{ticket.title}}</router-link>
                <span class="badge">{{ticket.status}}</span>
                <span class="date">{{ticket.date | date}}</span>
            </div>
            <transition name="fade" mode="out-in">
            <router-view></router-view>
        </transition>
        </section>
    </div>
</template>
<script>
import RemoteData from '../mixins/RemoteData'


export default {
 
   
    mixins: [
        RemoteData({tickets: 'tickets'}),
    ]
}
</script>
